import { Button, Input, Space } from 'antd';
import React, { useRef, useState } from 'react';
import { YmDialog } from 'ym-design';

function YmDialogPage() {
  const [visible1, setVisible1] = useState<boolean>(false);
  const dialogParent = useRef<HTMLDivElement>(null);
  const [visible2, setVisible2] = useState<boolean>(false);
  const [keyword, setKeyWord] = useState<string>('13');

  const onClose1 = () => {
    setVisible1(false);
  };

  const onClick1 = (e: React.MouseEvent) => {
    setVisible1(true);
  };

  const onClose2 = () => {
    setVisible2(false);
  };

  const onSearch = (value: string) => {
    console.log('--onSearch--:', value);
    setKeyWord(value);
  };

  return (
    <div>
      <div
        className="dialog_parent"
        ref={dialogParent}
        style={{
          width: '600px',
          height: '500px',
          border: 'red solid 1px',
          overflowY: 'auto',
        }}
      >
        <p style={{ height: '300px' }}>1</p>
        <p style={{ height: '300px' }}>2</p>
      </div>
      <div>
        {
          // dialogParent && (
          <YmDialog
            width={400}
            open={visible1}
            // dialogStyle={{ top: 20 }}
            centered={true}
            classNames={{
              wrapper: 'wrapper-center',
              header: 'panel-header',
              body: 'pane-body',
              footer: 'pane-footer',
            }}
            onClose={onClose1}
            title="dialog1"
            destroyOnClose={false}
            forceRender={false}
            getContainer={() => dialogParent.current!}
            footer={
              <Space size={8}>
                <Button key="cancel" onClick={onClose1}>
                  取消
                </Button>
                <Button key="confirm" onClick={onClose1}>
                  确认
                </Button>
              </Space>
            }
          >
            <Input.Search placeholder="搜索" onSearch={onSearch} />
            <p>basic modal--{keyword}</p>
            <p>当滚动条在html上时，</p>
            <button
              type="button"
              onClick={() => {
                setVisible2(true);
              }}
            >
              打开嵌套 dialog2
            </button>
          </YmDialog>
          // )
        }
        <YmDialog
          width={200}
          open={visible2}
          onClose={onClose2}
          onCancel={onClose2}
          onOk={onClose2}
          title="dialog2"
          destroyOnClose={false}
          forceRender={false}
          getContainer={() => dialogParent.current!}
        >
          <input autoFocus />
          <p>dialog 2</p>
        </YmDialog>
      </div>
      <p>
        <button type="button" onClick={onClick1}>
          {' '}
          打开dialog{' '}
        </button>
      </p>
    </div>
  );
}

export default YmDialogPage;
